<include file="public/min-header"/>
<link href="__PUBLIC__/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<script src="__PUBLIC__/plugins/daterangepicker/moment.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<style>
    .selectM {
        position: relative;
        width: 200px;
    }

    .selectM input {
        width: 100%;
        box-sizing: border-box;
        padding: 5px;
        font-size: 16px;
        cursor: pointer;
    }

    .selectM .dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        border: 1px solid #ccc;
        display: none;
        padding: 0px;
        box-sizing: border-box;
    }

    .selectM .dropdown ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .selectM .dropdown ul li {
        width: 100%;
        cursor: pointer;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .selectM .dropdown ul li:hover {
        background-color: #f5f5f5;
    }

    .selectM .dropdown ul li input[type="checkbox"] {
        margin-right: 5px;
        width: 50px;
    }
</style>
<div class="wrapper">
    <include file="public/breadcrumb"/>
    <section class="content ">
        <!-- Main content -->
        <div class="container-fluid">

            <div class="panel panel-default">
                <div class="panel-body ">
                    <!--表单数据-->
                    <form method="post" id="handle_shop">

                        <!--通用信息-->
                        <div class="tab-content col-md-10">
                            <div class="tab-pane active" id="tab_tongyong">
                                <table class="table table-bordered">
                                    <tbody>

                                    <tr>
                                        <td class="col-sm-2"><span style="color:#F00;">*</span>课程类型：</td>
                                        <td class="col-sm-8">
                                            <select class="form-control" name="courseType" id="courseType">
                                                <option value="">==请选择类型==</option>
                                                <option value="1" <if condition="$detail.courseType == 1">selected="selected"</if>>普通课</option>
                                                <option value="2" <if condition="$detail.courseType == 2">selected="selected"</if>>私教课</option>
                                            </select>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td class="col-sm-2"><span style="color:#F00;">*</span>课程名称：</td>
                                        <td class="col-sm-8">
                                            <input type="text" class="form-control" name="courseTitle" value="{$detail.courseTitle}" placeholder="请输入课程名称">
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>课程Logo：</td>
                                        <td class="col-sm-8">
                                            <div class="col-sm-4">
                                                <input type="text" class="form-control" style="width:350px;margin-left:-15px;" name="courseLogo" id="courseLogo" value="{$detail.courseLogo}" >
                                            </div>
                                            <div class="col-sm-4">
                                                <input type="button" class="btn btn-default" onClick="GetUploadify(1,'courseLogo','course','')"  value="上传LOGO图"/>
                                            </div>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td class="col-sm-2">课程描述：</td>
                                        <td class="col-sm-8">
                                            <input type="text" class="form-control" name="courseDescribe" value="{$detail.courseDescribe}" placeholder="请课程描述">
                                        </td>
                                    </tr>

                                    <tr>
                                        <td class="col-sm-2"><span style="color:#F00;">*</span>课程价格：</td>
                                        <td class="col-sm-8">
                                            <input type="text" name="coursePrice" value="{$detail.coursePrice}" class="form-control" style="width:150px;" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')" onpaste="this.value=this.value.replace(/[^\d.]/g,'')" />
                                        </td>
                                    </tr>

                                    <tr>
                                        <td class="col-sm-2"><span style="color:#F00;">*</span>节数：</td>
                                        <td class="col-sm-8">
                                            <input type="number" class="form-control" name="joint_number" value="{$detail.joint_number}">
                                        </td>
                                    </tr>

                                    <tr>
                                        <td class="col-sm-2"><span style="color:#F00;">*</span>所属教练：</td>
                                        <td class="col-sm-8 selectM" style="position: relative">
                                            <input type="text" readonly  value="{$detail.coachName}">
                                            <div class="dropdown">
                                                <ul>
                                                    <li>==请选择所属教练==</li>
                                                    <volist name="coachList" id="coachList">
                                                        <li class="lis" value="{$coachList.coachId}"><input type="checkbox" value="{$coachList.coachId}" <if condition="in_array($coachList.coachId,$detail.courseCoachId)">checked</if>>{$coachList.coachName}</li>
                                                    </volist>
                                                </ul>
                                            </div>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td><span style="color:#F00;">*</span>展示状态：</td>
                                        <td>
                                            <input type="radio" name="courseStatus" value="1" <if condition="$detail.courseStatus== '1'">checked="checked"</if> > 展示
                                            <input type="radio" name="courseStatus" value="0" <if condition="$detail.courseStatus== '0'">checked="checked"</if>  > 关闭
                                        </td>
                                    </tr>

                                    <tr>
                                        <td class="col-sm-2">排序：</td>
                                        <td class="col-sm-8">
                                            <input type="number" class="form-control" name="courseSort" value="{$detail.courseSort}">
                                            <span style="color:#F00;">数字越小，排序越靠前</span>
                                        </td>
                                    </tr>


                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td>
                                            <input type="hidden" name="courseId" value="{$detail.courseId}">
                                        </td>
                                        <td class="text-right"><input class="btn btn-primary" type="button" onclick="shop_submit()" value="保存"></td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </form><!--表单数据-->
                </div>
            </div>
        </div>
    </section>
</div>
<script>
    // 获取相关元素
    const selectInput = document.querySelector('.selectM input');
    const dropdown = document.querySelector('.selectM .dropdown');
    const checkboxes = document.querySelectorAll('.selectM .dropdown input[type="checkbox"]');
    const dropdownOptions = document.querySelectorAll('.selectM .dropdown ul li');
    var arr=[];
    var courseCoachId='';

    checkboxes.forEach((item,index)=>{
        if(item.checked){
            arr.push(item.value - 0)
        }
    })
    courseCoachId = arr.join(',');
    // 点击输入框，展开下拉框
    selectInput.addEventListener('click', function() {
        courseCoachId='';
        dropdown.style.display = 'block';

    });

    // 点击空白处，关闭下拉框
    document.addEventListener('click', function(event) {
        const target = event.target;
        if (!target.closest('.selectM')) {
            dropdown.style.display = 'none';
        }
    });

    // 点击选项或选项文字，更新输入框的值
    dropdownOptions.forEach(function(option) {

        const checkbox = option.querySelector('input[type="checkbox"]');

        option.addEventListener('click', function() {
            checkbox.checked = !checkbox.checked;

            if (checkbox.checked) {
                arr.push(option.value);
            } else {
                const index = arr.indexOf(option.value);
                if (index !== -1) {
                    arr.splice(index, 1);
                }
            }
            courseCoachId='';
            const selectedValues = Array.from(checkboxes)
                .filter(function(checkbox) {
                    return checkbox.checked;
                })
                .map(function(checkbox) {
                    return checkbox.parentNode.textContent.trim();
                });

            selectInput.value = selectedValues.join(', ');

            courseCoachId = arr.join(',');
            console.log(courseCoachId);

        });
    });

    function shop_submit() {

        let courseType = $("#courseType option:selected").val();
        let courseTitle = $("input[name='courseTitle']").val();
        let courseId = $("input[name='courseId']").val();
        let courseLogo = $("input[name='courseLogo']").val();
        let courseDescribe = $("input[name='courseDescribe']").val();
        let coursePrice = $("input[name='coursePrice']").val();
        let joint_number = $("input[name='joint_number']").val();
        let courseStatus = $("input[name='courseStatus']").val();
        let courseSort = $("input[name='courseSort']").val();

        $.ajax({
            type: "POST",
            url: "{:url('coach/doEditCourse')}",
            data: {
                courseType:courseType,
                courseTitle:courseTitle,
                courseId:courseId,
                courseLogo:courseLogo,
                courseDescribe:courseDescribe,
                coursePrice:coursePrice,
                joint_number:joint_number,
                courseStatus:courseStatus,
                courseSort:courseSort,
                courseCoachId:courseCoachId,
            },
            dataType: 'json',
            success: function(data) {
                if (data.code == 200) {
                    layer.msg(data.msg, {icon: 1, time: 1000}, function() {
                        window.parent.location.reload();
                    });
                } else {
                    layer.msg(data.msg, {icon: 2, time: 3000});
                }
            }
        });
    }
</script>
</body>
</html>